* {
  box-sizing: border-box
}

html {
  .wh100();

  body {
    .wh100();
    -webkit-tap-highlight-color: transparent;
    margin: 0;
    user-select: none;
    background: @color-primary-light;
    display: flex;
    justify-content: center;
    min-height: 150vw;

    #root {
      .wh100();

      .app {
        .wh100();

        button {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          transition: .2s;
          box-shadow: 0 0 4px 0 #AAAAAA;
          position: relative;

          &:hover {
            box-shadow: 0 0 6px 0 #AAAAAA;
          }

          .item-num {
            font-size: 16px;
            line-height: 23px;
            position: absolute;
            top: -6px;
            right: -6px;
            min-width: 22px;
            padding: 0 6px;
            height: 22px;
            border-radius: 11px;
            background: red;
            box-shadow: 0 0 4px 0 #999999;
          }
        }

        button.warning {
          border: 1px solid @color-warning;
          color: #fff;
          border-radius: 15px;
          background: @color-warning;
          box-shadow: 0 0 8px 0 #AAAAAA;

          &:hover {
            background: tint(@color-warning, 20%);
            border: 1px solid tint(@color-warning, 20%);
            transform: translateY(1px);
            box-shadow: 0 0 8px 0 #999999;
          }
        }

        button.primary {
          color: #fff;
          background: @color-primary;
          border: 1px solid @color-primary;
          box-shadow: 0 0 8px 0 #AAAAAA;

          &:hover {
            background: tint(@color-primary, 20%);
            border: 1px solid tint(@color-primary, 20%);
            transform: translateY(1px);
          }
        }
      }
    }
  }
}